import styled from 'styled-components';
import React, { CSSProperties, useCallback, useEffect, useState } from 'react';
import { Input, Button as AntdButton, Tree } from 'antd';
import { PlusOutlined, OrderedListOutlined } from '@ant-design/icons';
const { Search } = Input;

export interface CategoryTreeProps {
    style?: CSSProperties;
    categories: Array<CategoryTreeNode>;
    filter?: boolean;
    onSelect: (key: string | null, node: CategoryTreeNode | null) => Promise<void>;
    onLoadData?: (node: CategoryTreeNode) => Promise<void>
    onAdd?: () => Promise<void>;
}

export interface CategoryTreeNode {
    title: string;
    key: string;
    icon?: any;
    isLeaf?: boolean;
    children: CategoryTreeNode[];
}

const updateTreeData = (list: CategoryTreeNode[], key: React.Key, children: CategoryTreeNode[]): CategoryTreeNode[] =>
    list.map((node) => {
        if (node.key === key) {
            return {
                ...node,
                children,
            };
        }
        if (node.children) {
            return {
                ...node,
                children: updateTreeData(node.children, key, children),
            };
        }
        return node;
    });

export const CategoryTree: React.FC<CategoryTreeProps> = (props) => {

    const [treeData, setTreeData] = useState<Array<CategoryTreeNode>>(props.categories);

    const [filter, setFilter] = useState<string>('');

    useEffect(() => {
        setTreeData(props.categories);
    }, [props.categories]);

    return (
        <Container style={props.style}>
            {
                props.filter && <Header>
                    <Search
                        style={{
                            flex: 1
                        }}
                        styles={{}}
                        placeholder="Filter"
                        allowClear={true}
                        onChange={(event) => {
                            setFilter(event.target.value);
                        }} onSearch={(value) => {
                            setFilter(value);
                        }} />
                    {
                        props.onAdd && <AddButton>
                            <AntdButton
                                icon={<PlusOutlined />}
                                onClick={async () => {
                                    props.onAdd && await props.onAdd();
                                }}
                            ></AntdButton>
                        </AddButton>
                    }
                </Header>
            }
            <TreeContainer>
                <Tree
                    showIcon={true}
                    showLine={true}
                    treeData={treeData}
                    defaultExpandAll={true}
                    loadData={props.onLoadData}
                    onSelect={async (selectedKeys, e: { selected: boolean, selectedNodes, node, event }) => {
                        console.log(selectedKeys, e);
                        if (selectedKeys && selectedKeys.length > 0) {
                            props.onSelect(selectedKeys[0] + '', e.node ? e.node : null);
                        } else {
                            props.onSelect(null, null);
                        }
                    }}
                />
            </TreeContainer>
        </Container>
    );
}


const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
`;

const Header = styled.div`
    height: 45px;
    width: 100%;
    padding: 0 10px;
    display: flex;
    background-color: #EFEFEF;
    align-items: center;
    justify-content: space-between;
`;

const AddButton = styled.div`
    width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
`;

const TreeContainer = styled.div`
    flex: 1;
    width: 100%;
    display: flex;
`;